<script setup>
defineProps({
  rootComment: {
    type: Object,
    default: ()=> {}
  }
})
</script>
<template>
  <div class="root-comment">
    <div class="comment-list-item">
      <el-avatar icon="el-icon-user-solid" :size="35" style="width: 38px;"></el-avatar>
      <div class="right-container">
        <div class="left-box">
          <div class="comment-info">
            <div class="user">{{rootComment.userName}}</div>
            <div class="content">{{rootComment.content}}</div>
          </div>
          <div class="date">
            <span>{{rootComment.createTime}}</span>
          </div>
        </div>
        <div class="right-box">
          <div class="delete">
            <span>删除</span>
          </div>
          <div class="replay">回复</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.root-comment {
  margin-bottom: 10px;
  .comment-list-item {
    display: flex;
      .right-container {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .left-box {
          display: flex;
          .comment-info {
            margin: 0 10px;
            .user {
              margin-bottom: 10px;
            }
          }
        }
        .right-box {
          display: flex;
          .delete {
            margin-right: 20px;
          }
        }
      }
  }
}
</style>